<template>
    <div class="category" @clicl="fn()">
       <ul class="numUl" >
           <li v-for="(item,key) in liList" :key="key"  @click="toShowBook(key)" style="padding-left: 30px">
                    <span>{{item.id}}. {{item.hostNumber}}</span>
           </li>
       </ul>
   </div>

</template>

<script>
    import { getHostList } from '../url'
    import {ERROR_OK} from "../constVar";

    export default {
        data() {
            return {
                oldLiList:[],
                liList:[],
            }
        },
        methods: {
            async _getHostList() {
                let {status,data} = await getHostList();
                if(status === ERROR_OK){
                    this.oldLiList = data;
                }else {
                    this.oldLiList = [];
                }
                for(let i=this.oldLiList.length-1;i>=0;i--){
                   this.liList.push(this.oldLiList[i]);
                }
            },
            toShowBook(key){
                this.$router.push({name:'showbook',query:{id:this.liList[key].id}})
            },
        },
        created(){
            this._getHostList();
        }
    }
</script>

<style  lang="scss">
    * {box-sizing: border-box;}
    :root {
        font-size: 10px;
        font-family: Helvetica,Arial,Microsoft YaHei,Droid Sans,sans-serif;
    }
    .category{
        text-align: left;
        font-family: Monospaced Number,Chinese Quote,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Helvetica Neue,Helvetica,Arial,sans-serif;
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        .button{
            text-align: center;
            display: block;
            button{
                line-height: 1.5;
                display: inline-block;
                font-weight: 400;
                text-align: center;
                cursor: pointer;
                border: 1px solid #1890ff;
                white-space: nowrap;
                padding: 0 15px;
                font-size: 14px;
                border-radius: 4px;
                height: 32px;
                user-select: none;
                color: #fff;
                background-color: #1890ff;
                margin: 50px 0 20px 0;
                outline: none;
            }
        }
        ul{
            box-shadow: 2px 2px 2px #ddd;
            border-top: 2px dashed #ddd;
            li{
                line-height: 60px;
                padding: 0 30px;
                cursor: pointer;
                background: white;
                height: 60px;
                font-size: 16px;
                border-bottom: 1px solid #ddd;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
                transition: all 1s ease;
                &:hover{
                    background-color: #6495ed;
                    color: white;
                }
                a{
                    text-decoration: none;
                    color: rgba(0,0,0,.65);
                }
            }
        }
    }

</style>